<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="涨停表现">
        <!--  这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
      </n-card>
    </div>
    <n-card :bordered="false" class="proCard">
      <BasicForm
        @register="register"
        @submit="reloadTable"
        @reset="reloadTable"
        @keyup.enter="reloadTable"
        ref="searchFormRef"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
      <n-radio-group v-model:value="showType" name="showType">
        <n-radio-button key="tree" value="tree" label="连板天梯" />
        <n-radio-button key="table" value="table" label="数据表格" />
      </n-radio-group>
      <BasicTable
        v-if="showType == 'table'"
        :openChecked="true"
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="false"
        :checked-row-keys="checkedIds"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
        :resizeHeightOffset="-10000"
        size="small"
      />
      <n-grid v-if="showType == 'tree'" cols="1" responsive="screen" :x-gap="12" :y-gap="9">
        <n-gi>
          <n-card :bordered="false" size="small" />
          <n-space vertical size="large">
            <n-layout has-sider v-for="ztInfoItem in ztInfoRef">
              <n-layout-sider
                collapse-mode="transform"
                :collapsed-width="10"
                :width="120"
                show-trigger="arrow-circle"
                content-style="padding: 24px;"
                bordered
              >
                <n-h2>{{ ztInfoItem.name }}</n-h2>
              </n-layout-sider>

              <n-layout-content content-style="padding: 10px;">
                <div class="flex flex-wrap project-card">
                  <n-card
                    v-for="zt in ztInfoItem.list"
                    size="small"
                    class="cursor-pointer project-card-item ms:w-1/2 md:w-1/6"
                    hoverable
                  >
                    <div class="flex">
                      <span class="text-lg">{{ zt.name }}</span>
                      <span>
                        <n-badge v-if="zt.zbcs != 0" value="回封" class="ml-2" />
                      </span>
                    </div>
                    <div class="flex mt-2 h-4"> {{ zt.industry }} </div>
                    <div class="flex mt-2 h-4"
                      >封单：{{ (zt.fbzj / 10000 / 10000).toFixed(2) }} 亿</div
                    >
                  </n-card>
                </div>
              </n-layout-content>
            </n-layout>
          </n-space>
        </n-gi>
      </n-grid>
    </n-card>
    <Edit @reloadTable="reloadTable" ref="editRef" />
    <View ref="viewRef" />
  </div>
</template>

<script lang="ts" setup>
import {onMounted, onUpdated, ref} from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { BasicTable } from '@/components/Table';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { usePermission } from '@/hooks/web/usePermission';
  import { List, Export, Delete, getZTInfo } from '@/api/stockZtPool';
  import { columns, schemas } from './model';
  import Edit from './edit.vue';
  import View from './view.vue';
import {createStorage} from "@/utils/Storage";
import {LATEST_DAY} from "@/store/mutation-types";

  const dialog = useDialog();
  const message = useMessage();
  const { hasPermission } = usePermission();
  const actionRef = ref();
  const searchFormRef = ref<any>({});
  const viewRef = ref();
  const editRef = ref();
  const batchDeleteDisabled = ref(true);
  const checkedIds = ref([]);
  const showType = ref('tree');

  const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
  });

  const loadDataTable = async (res) => {
    return await List({ ...searchFormRef.value?.formModel, ...res });
  };
  const ztInfoRef = ref([]);
  const loadZtInfo = async (res) => {
    return await getZTInfo({ ...res });
  };
  onMounted(() => {
    const storage = createStorage({ storage: localStorage });
    let latestDay = Date.parse(storage.get(LATEST_DAY))
    loadZtInfo({ date: latestDay}).then((res) => {
      ztInfoRef.value = res.list;
    });
  });

  function onCheckedRow(rowKeys) {
    batchDeleteDisabled.value = rowKeys.length <= 0;
    checkedIds.value = rowKeys;
  }

  function reloadTable() {
    if (showType.value == 'tree') {
      loadZtInfo({ ...searchFormRef.value?.formModel }).then((res) => {
        ztInfoRef.value = res.list;
      });
    } else {
      actionRef.value.reload();
    }
  }
</script>

<style lang="less" scoped></style>
